<template>
	<view class="form-button" :style="xpFormButtonStyle">
		<u-button :text="text" :loading="loading" :throttleTime="throttleTime" :customStyle="btnCustomStyle" @click="handleClick"/>
	</view>
</template>

<script>
	export default {
		name: "form-button",
		props: {
			text: {
				type: [String, Number],
				default: ''
			},
			loading: {
				type: Boolean,
				default: false
			},
			throttleTime: {
				type: [Number, String],
				default: 1000
			},
			customStyle: {
				type: Object,
				default: () => ({})
			},
			xpFormButtonStyle: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			btnCustomStyle() {
				return {
					width: '698rpx',
					height: '90rpx',
					background: '#3D8BFF',
					boxShadow: '0rpx 8rpx 16rpx 0rpx rgba(45,108,254,0.26)',
					borderRadius: '20rpx',
					fontSize: '32rpx',
					fontWeight: '500',
					color: '#FEFEFF',
					...this.customStyle
				}
			}
		},
		methods: {
			handleClick(){
				this.$emit('click')
			}
		}
	}
</script>